<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="legend" style="width: 800px;height: 800px;"></div>
  <script src="./echarts.common.js"></script>
  <script>
    const dataAll = [
      [
        [10.0, 8.04],
        [8.0, 6.95],
        [13.0, 7.58],
        [9.0, 8.81],
        [11.0, 8.33],
        [14.0, 9.96],
        [6.0, 7.24],
        [4.0, 4.26],
        [12.0, 10.84],
        [7.0, 4.82],
        [5.0, 5.68]
      ],
      [
        [10.0, 9.14],
        [8.0, 8.14],
        [13.0, 8.74],
        [9.0, 8.77],
        [11.0, 9.26],
        [14.0, 8.1],
        [6.0, 6.13],
        [4.0, 3.1],
        [12.0, 9.13],
        [7.0, 7.26],
        [5.0, 4.74]
      ],
      [
        [10.0, 7.46],
        [8.0, 6.77],
        [13.0, 12.74],
        [9.0, 7.11],
        [11.0, 7.81],
        [14.0, 8.84],
        [6.0, 6.08],
        [4.0, 5.39],
        [12.0, 8.15],
        [7.0, 6.42],
        [5.0, 5.73]
      ],
      [
        [8.0, 6.58],
        [8.0, 5.76],
        [8.0, 7.71],
        [8.0, 8.84],
        [8.0, 8.47],
        [8.0, 7.04],
        [8.0, 5.25],
        [19.0, 12.5],
        [8.0, 5.56],
        [8.0, 7.91],
        [8.0, 6.89]
      ]
    ];
    // console.log(window);
    const obj = echarts.init(document.querySelector("#legend"))
    // 给初始化好的对象,配置选
    option = {
      title: {
        text: "Anscombe's quartet",
        left: 'center',
        top: 0
      },
      grid: [
        { left: '7%', top: '7%', width: '38%', height: '38%' },
        { right: '7%', top: '7%', width: '38%', height: '38%' },
        { left: '7%', bottom: '7%', width: '38%', height: '38%' },
        { right: '7%', bottom: '7%', width: '38%', height: '38%' }
      ],
      xAxis: [
        { gridIndex: 0, type:"category" },
        { gridIndex: 1, },
        { gridIndex: 2, },
        { gridIndex: 3, }
      ],
      yAxis: [
        { gridIndex: 0, },
        { gridIndex: 1, },
        { gridIndex: 2, },
        { gridIndex: 3, }
      ],
      series: [
        {
          name: 'I',
          type: 'scatter',
          xAxisIndex: 0,
          yAxisIndex: 0,
          data: dataAll[0],
          
        },
        {
          name: 'II',
          type: 'scatter',
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: dataAll[1],
          
        },
        {
          name: 'III',
          type: 'scatter',
          xAxisIndex: 2,
          yAxisIndex: 2,
          data: dataAll[2],
          
        },
        {
          name: 'IV',
          type: 'scatter',
          xAxisIndex: 3,
          yAxisIndex: 3,
          data: dataAll[3],
          
        }
      ]
    };
    obj.setOption(option)
  </script>
</body>

</html>